<template>
	<view class="bgMinor2 pt-24 plr-24 pt-40 pb-40" :style="{ minHeight: `${windowHeight}px`, height: 'auto' }">
		<view class="shadowClass">
			<!-- radius-blr-15 -->
			<view class="bgMinor5">
				<!-- height-500 -->
				<view class="Flex">
					
					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" height="500rpx" mode="heightFix"></uv-image>
				</view>
				
				<view class="bgWhite pt-40 pb-40  plr-22">
					<view class="flex">
						<view @click.stop="handleUse(0)" :class="{kuangClass2:dataInfo.onIndex === 0}" class="kuangClass cententClass tc plr-24 ptb-42">
							<view class="size-38 bold lineHeight1">季会员</view>
							<view class="numClass">{{dataInfo.quarter}}</view> 
							<view class="size-24 color-black2">每天{{dataInfo.everyDay}}元</view>
						</view>
						
						<view @click.stop="handleUse(1)" :class="{kuangClass2:dataInfo.onIndex === 1}" class="kuangClass cententClass tc plr-24 ptb-42">
							<view class="size-38 bold lineHeight1">月会员</view>
							<view class="numClass">{{dataInfo.monthly}}</view>
							<view class="size-24 color-black2">每天{{dataInfo.everyDayTwo}}元</view>
						</view>
					</view>
					<view class="tc lineHeight1">
						<view class="mt-60 colorGradual size-38 weight-6">会员权益</view>
						<view class="mt-40 size-24">会员可以创建脉星人角色</view>
						<view class="mt-24 size-24">会员可以浏览脉星人板块</view>
						<view class="mt-24 size-24">会员可以上架自己的脉星人来获取收益</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="mtb-50 tc">
			<uv-checkbox-group v-model="checkboxValue" shape="circle" @change="changeBox" labelColor="#999999" labelSize="16rpx">
				<uv-checkbox :customStyle="{ marginBottom: '8px' }" key="1" label="同意《会员服务协议》和《自动续费服务协议》" :name="1"></uv-checkbox>
			</uv-checkbox-group>
		</view>
		
		<view class="">
			<!-- <view class="width100 height-90"></view> -->
			<!-- <view class="fixedClass plr-24"> -->
				<view class="list_b_btn" @click="confirmPayment">确认开通</view>
			<!-- </view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive ,ref} from 'vue';
import { getWindowHeight } from '@/pages/util/getHeight';
import { onLoad } from '@dcloudio/uni-app';
import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
import useLoginStore from '@/pinia-store/userInfoStore';
	import { get, post } from '@/utils/request';
const useLogin = useLoginStore();
const windowHeight = getWindowHeight();
// console.log('useLoginuseLogin',useLogin);
const checkboxValue = ref([]);
/** @name 数据 */
const dataInfo = reactive({
	onIndex:0,
	monthly:0,
	everyDay:0,
	everyDayTwo:0,
	quarter:0,
});

onLoad((options: any) => {
	getMemberPrices()
});

/** @name 是否选中事件 */
const changeBox = (e) => {
	console.log('eeeeeeee',e);
	if(e?.length > 0) {
		
	} else {
		
	}
}
	const getMemberPrices = async () => {
		try {
			const response = await get<{
				code: number;
				result : any;
			}>('/aiContent/getMember');
			if (response.code == 200) {
				dataInfo.monthly = response.result.monthly 
		
				dataInfo.quarter = response.result.quarter
				dataInfo.everyDay = (response.result.quarter/90).toFixed(2)
				dataInfo.everyDayTwo = (response.result.monthly/30).toFixed(2)
			}

		} catch (error) {
			console.error(error);
		}
	};
	
	const confirmPayment = async ()=>{
		try {
			const type = dataInfo.onIndex
			var total = null
			if(type == 0){
				total = dataInfo.quarter
			}else{
				total = dataInfo.monthly
			}
			const response = await post<{
				code: number;
				result : any;
			}>('/authentication/member', { type:type,total:total });
			if (response.code == 200) {
				const response = await post<{
					totalFee : Number;
					body : String
				}>('/wechatpay/createOrder', { totalFee: total, body: '图片' });
				console.log(response)
				await uni.requestPayment({
					appId: response.appId,
					nonceStr: response.nonceStr,
					package: response.package,
					paySign: response.paySign,
					signType: response.signType,
					timeStamp: response.timeStamp,
					success: (res) => {
						
					}
						
						})
			}else{
				
			}
		
		} catch (error) {
			console.error(error);
		}
	}


/** @name 切换选中会员 */
function handleUse(index:number) {
	console.log('handleUse',index);
	dataInfo.onIndex = index
}
</script>

<style scoped lang="scss">
:deep(.uv-checkbox-group--row) {
	//  模版
	justify-content: center;
}
:deep(.uv-checkbox){
	margin-bottom: 0 !important;
}

.shadowClass {
	border-radius: 0 0 16rpx 16rpx;
}

.kuangClass {
	width: 320rpx;
	height: 282rpx;
	// border: 4rpx solid #cecece;
	border-radius: 16rpx;
	box-shadow: 0 0 8px #cecece;
}
.kuangClass2 {
	width: 320rpx;
	height: 282rpx;
	background-image: url('/static/images/biankuan.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	// background-size: contain;
	// background-size: 320rpx 282rpx;
}

.cententClass {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.numClass {
	font-size: 60rpx;
	font-weight: 700;
	line-height: 1;
	background: -webkit-linear-gradient(#ffc800, #ff0053); // , 100%,#ff5037 left top,
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
// 按钮
.list_b_btn {
	// letter-spacing: 8rpx;
	background: -webkit-linear-gradient(left top, #ffc800, #ff0053, #ff5037); // , 100%,#ff5037 left top,
}
</style>
